<template>
  <div class="album">
    <!-- 头部简介 -->
    <my-introduction
      :albumInfo="albumInfo"
      :id="id"
      :anchorId="anchorId"
      :userInfo="userInfo"
    ></my-introduction>
    <!-- 节目 -->
    <my-program :id="id" @play-pause="play"></my-program>
    <!-- 相似专辑 -->
    <xs-album :id="id"></xs-album>
    <!-- 主播信息 -->
    <zb-comp :userInfo="userInfo" :userListAlbum="userListAlbum"></zb-comp>

    <!-- 经典必听 -->
    <jd-album :id="id"></jd-album>

    <!-- // 底部 -->
    <my-footer></my-footer>

    <float-open></float-open>

    <page-play :playPath="playPath" :isPlay="isPlay"></page-play>

    <my-load v-if="isShow"></my-load>

    <vip-comp :price="99.99" v-if="isVip > 0"></vip-comp>
    <go-login v-if="isVip > 0"></go-login>
  </div>
</template>

<script>
import MyIntroduction from "@/views/album/albumcomp/MyIntroduction.vue";
import MyProgram from "@/views/album/albumcomp/MyProgram.vue";
import XsAlbum from "@/views/album/albumcomp/XsAlbum.vue";
import JdAlbum from "@/views/album/albumcomp/JdAlbum.vue";
import ZbComp from "@/views/album/albumcomp/ZbComp.vue";
import VipComp from "@/views/album/albumcomp/VipComp.vue";
import GoLogin from "@/views/album/albumcomp/GoLogin.vue";

import { initAlbumDetailData } from "@/request/api.js";
import { initzhuboDetailData } from "@/request/api.js";
import { initZbData } from "@/request/api.js";
export default {
  name: "MyAblum",

  data() {
    return {
      albumInfo: {},
      id: 0,
      anchorId: 0,
      userInfo: {},
      userListAlbum: [],
      playPath: "",
      isPlay: false,
      isShow:false,
      isVip:0,
    };
  },
  watch:{
    // $route(){
    //   this.$route.go(0)
    // }
  },
  components: {
    MyIntroduction,
    MyProgram,
    XsAlbum,
    JdAlbum,
    ZbComp,
    VipComp,
    GoLogin
  },
  watch: {
    isShow(val){
      if(val){
        document.body.style.position = 'fixed'
      }else{
        document.body.style.position = 'static'
      }
    }
  },
  created() {
    window.scroll(0,0)
    console.log(this.$route.params.id);
    this.id = this.$route.params.id - 0;
    this.initData();
  },
  methods: {
    play(obj) {
      this.playPath = obj.playPath;
      this.isPlay = obj.isPlay;
    },

    initData() {
      let flag = localStorage.getItem('flag')
      if(flag){
        this.isShow = flag
      }

      var id = this.id;
      initAlbumDetailData(id).then((res) => {
        let { data } = res.data;
        console.log("我的专辑",data)
        let obj = {
          // 专辑id
          
          title: data.albumDetailInfo.albumInfo.title,
          cover:
            "https://imagev2.xmcdn.com/" + data.albumDetailInfo.albumInfo.cover,
          statCountInfo: data.albumDetailInfo.statCountInfo,
          des: data.albumRichInfo.richIntro,
          txtStyle: data.albumRichInfo.richIntro,
          customTitle:data.albumDetailInfo.albumInfo.salePoint,
          // 
        };
        document.title = obj.title
        this.id = data.id;
        this.anchorId = data.anchorId;
        this.albumInfo = obj;
        this.isVip = data.albumVipPayType
        if(this.albumInfo){
            this.isShow = false
            localStorage.setItem('flag',this.isShow)
          }

        initzhuboDetailData(data.anchorId).then((response) => {
          let userInfo1 = response.data.data.anchorInfo.userInfo;
          console.log("zhuboxxxxxx", userInfo1);
          console.log("用户", userInfo1);
          let obj = {
            anchorId: response.data.data.anchorId,
            url: response.data.data.anchorInfo.url,
            img: "https://imagev2.xmcdn.com/" + userInfo1.logo,
            nickname: userInfo1.nickname,
            des: userInfo1.personalSignature,
            anchorGrade: userInfo1.anchorGrade,
            statCountInfo: response.data.data.anchorInfo.statCountInfo,
          };

          this.userInfo = obj;
          let data =
            response.data.data.anchorAlbumPageRecords.albumBriefDetailInfos;

          for (let i = 0; i < 3; i++) {
            if (data[i].albumInfo) {
              let obj = {
                id: data[i].albumInfo.id,
                img: "https://imagev2.xmcdn.com/" + data[i].albumInfo.cover,
                title: data[i].albumInfo.title,
                countInfo: data[i].statCountInfo,
              };
              
              this.userListAlbum.push(obj);
            }else{
              return
            }

            
          }

          
        });
      });
    },
  },

 
};
</script>

<style lang="scss" scoped>
</style>

